<template>
  <div class="commodity-history">
    <a-drawer
      :title="commodityTitle==1?'出库历史':'价格历史'"
      :width="drawerWidth"
      :visible="isShowDrawer"
      @close="onClose"
    >
      <div class="top-box">
        <div class="msg-update"><a-icon style="color:#1876FF;margin-right:9px;cursor:pointer" type="sync" />最近一次更新：{{updateAt}}</div>
        <img class="goods-img" src="../../../../assets/image/sellerHub/out_goods.png" alt="">
        <div class="top-msg">
          <p>{{materialName}}<span class="top-msg-code"> <em>|</em>零件号：{{materialCode}}</span><span class="msg-tag">现库存: {{distributionNum}}{{materialId}}</span></p>
          <p><span class="msg-label">规格：</span>{{specifications}}<span class="msg-label"><em>|</em>计量单位：</span>{{materialId}}</p>
        </div>
      </div>
      <div class="commodity-line"></div>
      <div class="commidty-container">
        <a-button style="float:right;margin-left:8px;" slot="enterButton">
            <img style="width:14px;margin-right:7px;position:relative;top:-2px;" src="../../../../assets/image/sellerHub/export.png" alt="">
            批量导出
        </a-button>
        <a-input
          v-if="commodityTitle==1"
          placeholder="搜索订单编号"
          style="width:23.81%;float:right;"
          @pressEnter="onSearch"
        >
          <img slot="suffix" style="width:13px;" src="../../../../assets/image/sellerHub/searchicon.png" alt="">
        </a-input>
        <div v-if="commodityTitle==1" class="search-list">
            <span>
              配货完成时间：
            </span>
            <a-config-provider :locale="locale">
              <a-range-picker style="width:17.49%;" v-model="distributeFinishTime">
                <img slot="suffixIcon" src="../../../../assets/image/sellerHub/calendar.png" alt="">
                <template slot="dateRender" slot-scope="current">
                  <div class="ant-calendar-date" :style="getCurrentStyle(current)">
                    {{ current.date() }}
                  </div>
                </template>
              </a-range-picker>
            </a-config-provider>
          
            <span class="search-label">
              订单时间：
            </span>
            <a-config-provider :locale="locale">
              <a-range-picker style="width:17.49%;" v-model="createAt">
                <img slot="suffixIcon" src="../../../../assets/image/sellerHub/calendar.png" alt="">
                <template slot="dateRender" slot-scope="current">
                  <div class="ant-calendar-date" :style="getCurrentStyle(current)">
                    {{ current.date() }}
                  </div>
                </template>
              </a-range-picker>
            </a-config-provider>
            <span class="search-label">
              出库人：
            </span>
            <a-input style="width:17.49%;" v-model="createBy" placeholder="搜索出库人" />
            <a-button html-type="submit" @click="resetBtn" style="border:none;box-shadow:none;float:right;">
              重置
            </a-button>
            <!-- <a-button type="primary" html-type="submit"  style="">
              查询
            </a-button> -->
        </div>
        <div v-else class="search-list">
            <span class="search-label">
              操作时间：
            </span>
            <a-config-provider :locale="locale">
              <a-range-picker style="width:17.49%;" v-model="createPriceAt">
                <img slot="suffixIcon" src="../../../../assets/image/sellerHub/calendar.png" alt="">
                <template slot="dateRender" slot-scope="current">
                  <div class="ant-calendar-date" :style="getCurrentStyle(current)">
                    {{ current.date() }}
                  </div>
                </template>
              </a-range-picker>
            </a-config-provider>
          
          <span class="search-label">
            操作人：
          </span>
          <a-input style="width:17.49%;" placeholder="搜索操作人" />
            <a-button html-type="submit" @click="resetBtn" style="border:none;box-shadow:none;float:right;">
              重置
            </a-button>
            <!-- <a-button type="primary" html-type="submit"  style="">
              查询
            </a-button> -->
        </div>
        <a-config-provider :locale="locale">
          <a-table 
          :locale="localeTable"
          :columns="commodityTitle==2?columns:WarehouseHistory" :data-source="commodityTitle==2?data:data2"
          :pagination="false" >
            <div slot="priceDifferent" slot-scope="priceDifferent" class="stock-num">
              {{priceDifferent}}
              <img style="position:relative;width:10px;top:-2px;left:8px;" src="../../../../assets/image/sellerHub/up.png" alt="">
              <img style="position:relative;width:10px;top:-2px;left:8px;" src="../../../../assets/image/sellerHub/down.png" alt="">
            </div>
          </a-table>
        </a-config-provider>
        <div class="bottom-pagination-card">
          <pagination 
            style="float:right;margin:20px;" 
            @pageChange="pageChange"
            :total="total"
            :current="current">
          </pagination>
          <span class="paginationBefore">共 <i>{{total}}</i> 条</span>
        </div>
      </div>
    </a-drawer>
  </div>
</template>
<script>
import Vue from 'vue'
import {Drawer} from 'ant-design-vue'
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import Pagination from '@/components/common/pagination'
import Empty from './emptyImg'
Vue.use(Drawer)
//历史价格table配置
const columns = [
  {
    title: '上次含税销售价(元)',
    dataIndex: 'oldTaxPrice',
  },
  {
    title: '本次含税销售价(元)',
    dataIndex: 'newTaxPrice',
    defaultSortOrder: 'descend',
    sorter: (a, b) => a.age - b.age,
  },
  {
    title: '差异价格',
    dataIndex: 'priceDifferent',
    defaultSortOrder: 'descend',
    sorter: (a, b) => a.age - b.age,
    scopedSlots: { customRender: 'priceDifferent' },
  },
  {
    title: '操作时间',
    dataIndex: 'editTime',
    defaultSortOrder: 'descend',
    sorter:  (a, b) => { 
      let aTimeString = a.editTime;
      let bTimeString = b.editTime;
      let aTime = new Date(aTimeString).getTime();
      let bTime = new Date(bTimeString).getTime();
      return aTime - bTime; },
  },
  {
    title: '操作人',
    dataIndex: 'editPeople',
  },
];
//出库历史table配置
const WarehouseHistory = [
  {
    title: '订单号',
    dataIndex: 'orderNum',
  },
  {
    title: '订单时间',
    dataIndex: 'orderTime',
    defaultSortOrder: 'descend',
    sorter:  (a, b) => { 
      let aTimeString = a.editTime;
      let bTimeString = b.editTime;
      let aTime = new Date(aTimeString).getTime();
      let bTime = new Date(bTimeString).getTime();
      return aTime - bTime; },
  },
  {
    title: '配货完成时间',
    dataIndex: 'completeTime',
    defaultSortOrder: 'descend',
    sorter:  (a, b) => { 
      let aTimeString = a.editTime;
      let bTimeString = b.editTime;
      let aTime = new Date(aTimeString).getTime();
      let bTime = new Date(bTimeString).getTime();
      return aTime - bTime; },
  },
  {
    title: '配货人',
    dataIndex: 'shipmentPeople',
  },
  {
    title: '配货数量',
    dataIndex: 'shipmentNum',
    defaultSortOrder: 'descend',
    sorter: (a, b) => a.age - b.age,
    scopedSlots: { customRender: 'shipmentNum' },
  },
];
export default {
  model: {
    prop: 'isShowDrawer',
    event: 'change'
  },
  props: {
    isShowDrawer: Boolean,
    commodityTitle: {
      type: [String,Number],
      default: 1
    },
    drawerData: Object,
    inventoryList: Object
  },
  components:{Pagination},
  data() {
    return {
      drawerWidth: window.innerWidth*0.8,
      locale: zhCN,
      localeTable:{emptyText:<Empty />},
      data:[],
      data2:[],
      columns,
      total:0,
      current:1,
      pageNo:1,
      pageSize:1,
      WarehouseHistory,
      selectedRowKeys: [],
      visible: false,
      form: this.$form.createForm(this, { name: 'coordinated' }),
      //历史物料信息---start
      distributionNum: 0,
      materialCode:'',
      materialName:'',
      specifications:'',
      updateAt:'',
      materialId:'',
      //-----end
      //出库历史参数---start
      createAt:[],
      createBy:'',
      distributeFinishTime:[],
      subOrderNo:'',
      //-----end
      createPriceAt:[],//价格历史参数
    }
  },
  computed: {
    stockHistory() {
      //出库历史参数
      return {
        "createAtEnd": this.createAt[1] || '',
        "createAtStart": this.createAt[0]|| '',
        "createBy": this.createBy|| '',
        "distributeFinishTimeEnd": this.distributeFinishTime[1]|| '',
        "distributeFinishTimeStart": this.distributeFinishTime[0]|| '',
        "subOrderNo": this.subOrderNo|| '',
        pageSize: this.pageSize,
        pageNo:this.pageNo,
      }
    },
    priceHistory() {
      //价格历史参数
      return {
        "createAtEnd": this.createPriceAt[1]|| '',
        "createAtStart": this.createPriceAt[0]|| '',
        pageSize: this.pageSize,
        pageNo:this.pageNo,
      }
    },
  },
  watch: {
    isShowDrawer(_val) {
      if(_val) this.init();
    },
    stockHistory(_val) {
      this.init();
    },
    priceHistory(_val) {
      this.init();
    },
    drawerData(_val) {
      if(_val.updateAt) {
        this.updateAt = this.formatDate(_val.updateAt);
      }else {
         this.updateAt = ''
      }
    },
    inventoryList(_val) {
      //填充物料信息
      let _data = [];
      this.distributionNum = _val.inventoryNum || '';
      this.materialCode = _val.materialCode || '';
      this.materialName = _val.name || '';
      this.specifications = _val.specifications || '';
      this.materialId = _val.unit || '';
    }
  },
  methods: {
    init() {
      let _params = this.commodityTitle == 1?this.stockHistory:this.priceHistory;
      _params = {..._params,inventoryId:this.inventoryList.materialId};
      let _url = this.$api.sellerCenter.outHistoryPage;
      this.commodityTitle == 2?_url = this.$api.sellerCenter.priceAdjustmentPage:'';
      this.$store.dispatch('request', _url(
        _params
      )).then(res => {
        this.total = res.result.total;
        let _res = res.result.records;
        let _data = [];
        _res.map((n,i) => {
          this.commodityTitle == 1?
          _data.push({//出库历史
            key: i,
            orderNum: n.materialName,
            orderTime: n.createAt || 0,
            completeTime: n.distributionTime || 0,
            shipmentPeople: n.operator || 0,
            shipmentNum: n.outInventoryNum || 0,
          }):_data.push({//价格历史
            key: i,
            oldTaxPrice: n.oldTaxPrice,
            newTaxPrice: n.newTaxPrice,
            priceDifferent: n.diffPrice,
            editTime: n.createAt,
            editPeople: n.operator
          })
        })
        this.commodityTitle == 1?this.data2 = _data:this.data = _data;
      }).catch(() => {
        // this.$message.error('')
      })
    },
    pageChange(_page) {
      //改变页码
      this.current = _page;
      this.pageNo = _page;
      this.init();
    },
    getCurrentStyle(current, today) {
      const style = {};
      if (current.date() === 1) {
        style.border = '1px solid #1890ff';
        style.borderRadius = '50%';
      }
      return style;
    },
    resetBtn() {
      //重置
      this.createAt =[];
      this.createBy="";
      this.distributeFinishTime=[];
      this.subOrderNo="";
      this.createPriceAt=[];
    },
    onClose() {
      this.$emit('change',false)
    },
    onSearch(_val) {
      this.subOrderNo = _val;
    },
    formatDate(date) {
      let d = new Date(date);
      let month = (d.getMonth() + 1) < 10 ? '0'+(d.getMonth() + 1) : (d.getMonth() + 1);
      let day = d.getDate()<10 ? '0'+d.getDate() : d.getDate();
      let hours = d.getHours()<10 ? '0'+d.getHours() : d.getHours();
      let min = d.getMinutes()<10 ? '0'+d.getMinutes() : d.getMinutes();
      let sec = d.getSeconds()<10 ? '0'+d.getSeconds() : d.getSeconds();
      let times=d.getFullYear() + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + sec;
      return times
    },
  },
}
</script>
<style lang="less">
.ant-drawer-body {
  padding: 0;
}
.commodity-line {
    width: 100%;
    height: 8px;
    background: #f8f8f8;
  }
.top-box {
  height: 148px;
  padding: 24px;
}
.goods-img {
    display: block;
    float: left;
    width: 100px;
    height: 100px;
    border: 1px solid rgba(34,49,77,0.08);
  }
.top-msg {
  float: left;
  color: #272424;
  margin-left: 16px;
  font-size: 22px;
  margin-top: 18px;
  .top-msg-code {
    font-size: 16px;
  }
  em {
    color: #f2f2f2;
    margin: 0 8px;
    position: relative;
    top: -3px;
    font-size: 12px;
  }
  .msg-label {
    color: rgba(39,36,36,0.6);
  }
  .msg-tag {
    margin-left: 8px;
    background: url('../../../../assets/image/sellerHub/top_bg.png') no-repeat center top;
    display: inline-block;
    width: 140px;
    height: 26px;
    line-height: 26px;
    color: #FF9003;
    padding-left: 37px;
    font-size: 14px;
    font-weight: 500;
  }
  p:nth-of-type(1) {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 8px;
  }
  p:nth-of-type(2) {
    font-size: 14px;
    margin-bottom: 16px;
    font-weight: 500;
    
  }
  p:nth-of-type(3) {
    font-size: 14px;
    span {
      color: rgba(39,36,36,0.60);
      margin-right: 8px;
    }
    span:nth-of-type(2) {
      margin-left: 100px;
    }
  }
}
.msg-update {
  position: absolute;
  right: 24px;
  top: 84px;
}
.commidty-container {
 padding: 24px;
}
.search-list {
  width: 100%;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0px 0px 6px 1px rgba(39,36,36,0.08); 
  margin-top: 48px;
  margin-bottom: 16px;
  padding: 16px 16px;
  .search-label {
    margin-left: 16px;
  }
}
.bottom-pagination-card>.paginationBefore {
    float: right;
    line-height: 70px;
    i {
      color: @activeRed;
    }
  }
.bottom-pagination-card {
  position: fixed;
  bottom: 0;
  width: 80%;
  background: #fff;
  right: 0;
  box-shadow: 0px -2px 2px 0px rgba(39,36,36,0.02); 
  padding-right: 30px;
}
</style>